<template>
    <!-- main S -->
    <view class="main">
        <!-- #ifdef MP -->
        <!-- 只编译到微信小程序端 -->
        <view class="flex align-center fixed-top" style="height: 44px;">
            <!-- 搜索框 -->
            <view class="ml-2 flex align-center flex-1 rounded-circle px-1"
                style="background-color: #F6F7F8;color: #959FA0;border: 1rpx solid red;width: 96%;margin: 0 auto;border-radius: 20rpx;"
                @click="goSearch()">
                <text class="iconfont iconsousuokuang" style="margin-right: 8px;font-size: 20px;"></text>
                <text>输入商品名搜索优惠</text>
            </view>
        </view>
        <!-- #endif -->
        <!-- top S -->
        <view class="top">
            <!-- notice S -->
            <view class="notice">
                花多少，送多少，同样的钱可以花两次！！！
            </view>
            <!-- notice E -->
            <view class="channelBox">
                <view class="channelItem" v-for="(item,index) in channel" :key="index" @click="goChannelMain(item)">
                    <view class="box">
                        <image :src="item.logo" mode=""></image>
                        <text>{{item.title}}</text>
                    </view>
                </view>
                <view class="clear_both"></view>
            </view>
        </view>
        <!-- top E -->
        <!-- center S -->
        <view class="center">
            <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
                <swiper-item v-for="(item,index) in bannerList" :key="index">
                    <view class="swiper-item">
                        <image src="../../static/1.png" mode=""></image>
                    </view>
                </swiper-item>
            </swiper>
        </view>
        <!-- center E -->
        <!-- bottom S -->
        <view class="bottom">
            <text class="title">红包商城</text>
            <view class="goodsList">
                <view class="goodsBox" v-for="(goods,index) in goodsList" @click="goGoodsDetail(goods)">
                    <image :src="goods.image" mode=""></image>
                    <text>{{goods.title}}</text>
                    <text>门店零售价:</text>
                    <view class="moneyBox">
                        <text>￥{{goods.redpack}}</text>
                        <text>已领{{goods.buy_num}}件</text>
                    </view>
                    <view class="clear_both"></view>
                    <view class="redPackBtn">
                        红包下单
                    </view>
                </view>
                <view class="clear_both"></view>
            </view>
        </view>
        <!-- bottom E -->
    </view>
    <!-- main E -->
</template>

<script>
    import {
        channelList
    } from '@/service/channel.js'
    import {
        getTime,
        getStorage
    } from '@/utils/utils.js'
    export default {
        data() {
            return {
                title: 'Index',
                // 渠道列表
                channel: [{
                        id: 1,
                        name: "京东",
                        logo: "../../static/logo.png"
                    },
                    // {
                    //     id: 2,
                    //     name: "生活缴费",
                    //     icon: "../../static/logo.png"
                    // },
                    // {
                    //     id: 3,
                    //     name: "电影票",
                    //     icon: "../../static/logo.png"
                    // },
                    // {
                    //     id: 4,
                    //     name: "火车票",
                    //     icon: "../../static/logo.png"
                    // },
                    // {
                    //     id: 5,
                    //     name: "会员卡券",
                    //     icon: "../../static/logo.png"
                    // },
                    // {
                    //     id: 6,
                    //     name: "娱乐缴费3",
                    //     icon: "../../static/logo.png"
                    // },
                    // {
                    //     id: 7,
                    //     name: "娱乐缴费3",
                    //     icon: "../../static/logo.png"
                    // },
                    // {
                    //     id: 8,
                    //     name: "娱乐缴费3",
                    //     icon: "../../static/logo.png"
                    // },
                    // {
                    //     id: 9,
                    //     name: "娱乐缴费3",
                    //     icon: "../../static/logo.png"
                    // }
                ],
                bannerList: [
                    "../../static/logo.png",
                    "../../static/logo.png",
                    "../../static/logo.png",
                    "../../static/logo.png",
                ],
                goodsList: [{
                        id: 1,
                        title: '心相印柔影卫生纸卷纸1700克提装家用卷纸厕纸四层加厚实芯卷批发',
                        redpack: 100,
                        image: 'http://dev-platform.zhiwangyunchuang.com:800/1.jpg',
                        buy_num: 101
                    },
                    {
                        id: 2,
                        title: '维达卷纸4层27卷200g有芯卷筒纸整箱装卫生纸厕纸加厚蓝色经典',
                        redpack: 200,
                        image: 'http://dev-platform.zhiwangyunchuang.com:800/2.jpg',
                        buy_num: 102
                    }
                ]
            }
        },
        onLoad() {
            this.channelList();
        },
        methods: {
            goChannelMain(channel) {
                if (channel.id > 1) {
                    uni.showToast({
                        title: '开发中，敬请期待',
                        icon: 'none'
                    })
                    return false;
                }
                uni.navigateTo({
                    url: `../channel/main`
                })
            },
            // 搜索页面
            goSearch() {
                uni.navigateTo({
                    url: `../product/product_list`
                })
            },
            // 商品列表
            async channelList() {
                let {
                    data
                } = await channelList({
                    'timestamp': getTime(),
                    'openId': getStorage('openId'),
                });
                this.channel = data;
                // this.shortUrl = data.shortURL;
            },
            // 跳转商品详情
            goGoodsDetail(goods) {
                let goodsId = goods.id;
                console.log(goodsId);
                uni.navigateTo({
                    url: `../goods/goods_detail?id=${goodsId}`
                })
            }
        }
    }
</script>

<style>
    .top {
        background-color: #FFFFFF;
        width: 95%;
        margin: 0 auto;
        border-radius: 25rpx;
        padding-top: 30rpx;
    }

    .top>.notice {
        height: 80rpx;
        border: 0rpx solid red;
        width: 92%;
        margin: 0 auto;
        border-radius: 20rpx;
        background-color: rgba(91, 61, 240, 0.2);
        line-height: 80rpx;
        padding-left: 20rpx;
        font-size: 20rpx;
        color: #FF0000;
    }

    .top>.channelBox {
        border: 0rpx solid red;
        width: 90%;
        margin: 0 auto;
        margin-top: 30rpx;
    }

    .channelBox>.channelItem {
        float: left;
        width: 25%;
    }

    .channelItem>.box {
        float: left;
        border: 0rpx solid red;
        text-align: center;
        margin-bottom: 30rpx !important;
        margin: 0 auto;
        margin-left: 20rpx;
    }

    .box>image {
        height: 120rpx;
        width: 120rpx;
    }

    .box text {
        display: block;
        font-size: 20rpx;
        margin-top: -6rpx;
    }

    .main>.center {
        background-color: #FFFFFF;
        height: 300rpx;
        width: 95%;
        margin: 0 auto;
        margin-top: 20rpx;
        border-radius: 25rpx;
    }

    .center .swiper-item>image {
        height: 350rpx !important;
        width: 700rpx !important;
    }

    .main>.bottom {
        /* background-color: #FFFFFF; */
        width: 95%;
        margin: 0 auto;
        margin-top: 20rpx;
        padding-top: 10rpx;
        background-color: #F1F1F1;
    }

    .bottom>.title {
        display: block;
        border: 0rpx solid red;
        margin: 0 auto;
        width: 220rpx;
        text-align: center;
        margin-top: 40rpx;
        margin-bottom: 40rpx;
    }

    .bottom>.title::before {
        content: '—';
        float: left;
        display: inline-block;
        margin-right: 4rpx;
    }

    .bottom>.title::after {
        content: '—';
        float: right;
        display: inline-block;
        margin-left: 4rpx;
    }

    .bottom>.goodsList {
        margin-top: 20rpx;
    }

    .goodsList>.goodsBox {
        height: 700rpx;
        width: 340rpx;
        border: 0rpx solid red;
        margin-bottom: 20rpx;
        float: left;
        margin-left: 10rpx;
        border-radius: 10rpx;
        background-color: #ffffff;
    }

    .goodsBox>image {
        height: 60%;
        width: 100%;
    }

    .goodsBox>text:nth-child(2) {
        font-size: 30rpx;
        font-weight: bold;
        padding-left: 10rpx;
        display: inline-block;
        border: 0rpx solid red;
        width: 96%;
        height: 50rpx;
        line-height: 50rpx;
        overflow: hidden;
    }

    .goodsBox>text:nth-child(3) {
        font-size: 24rpx;
        padding-left: 10rpx;
        display: inline-block;
        border: 0rpx solid red;
        width: 96%;
        color: red;
        height: 40rpx;
        line-height: 40rpx;
    }

    .goodsBox>.moneyBox text {
        display: block;
        width: 45%;
        float: left;
        height: 40rpx;
        line-height: 40rpx;
    }

    .goodsBox>.moneyBox text:nth-child(1) {
        border: 0rpx solid red;
        text-align: left;
        color: red;
        /* text-decoration: line-through; */
        margin-left: 10rpx;
        font-weight: bold;
    }

    .goodsBox>.moneyBox text:nth-child(2) {
        border: 0rpx solid red;
        text-align: right;
        color: #999999;
        font-size: 24rpx;
    }

    .goodsBox>.redPackBtn {
        width: 90%;
        border: 1rpx solid red;
        height: 80rpx;
        margin: 0 auto;
        text-align: center;
        line-height: 80rpx;
        border-radius: 50rpx;
        margin-top: 20rpx;
        color: #FFFFFF;
        background-color: rgba(255, 0, 0, 0.8);
    }
</style>
